<template>
  <view class="tag-demo">
    <a-card title="基本用法">
      <a-space>
        <a-tag>Default</a-tag>
        <a-tag>Tag 1</a-tag>
        <a-tag>Tag 2</a-tag>
        <a-tag>
          <template #icon>
            <a-icon name="kongzhonghuayuan"></a-icon>
          </template>
          Complete
        </a-tag>
      </a-space>
    </a-card>
    <a-card title="可关闭标签">
      <a-space>
        <a-tag closable>Tag</a-tag>
        <a-tag closable>
          <template #icon>
            <a-icon name="kongzhonghuayuan"></a-icon>
          </template>
          Tag
        </a-tag>
      </a-space>
    </a-card>

    <a-card title="标签的颜色">
      <a-space wrap>
        <a-tag
          v-for="(color, index) of colors"
          :key="index"
          :color="color"
          closable
          >{{ color }}</a-tag
        >
      </a-space>
    </a-card>

    <a-card title="标签的尺寸">
      <a-space>
        <a-tag size="large" closable>Large</a-tag>
        <a-tag closable>Medium</a-tag>
        <a-tag size="small" :default-visible="false" closable>Small</a-tag>
      </a-space>
    </a-card>

    <a-card title="带图标的tag">
      <a-space>
        <a-tag color="gray">
          <template #icon>
            <Aicon name="guanbi1"></Aicon>
          </template>
          Github
        </a-tag>
        <a-tag color="orangered">
          <template #icon>
            <Aicon name="DIYcanba"></Aicon>
          </template>
          Gitlab
        </a-tag>
        <a-tag color="blue">
          <template #icon>
            <Aicon name="reshuiqi"></Aicon>
          </template>
          Twitter
        </a-tag>
        <a-tag color="arcoblue">
          <template #icon>
            <Aicon name="kuaijiezhifu"></Aicon>
          </template>
          Facebook
        </a-tag>
      </a-space>
    </a-card>

    <a-card title="带边框的标签">
      <a-space wrap>
        <a-tag
          v-for="(color, index) of custom"
          :key="index"
          :color="color"
          bordered
          >{{ color }}</a-tag
        >
      </a-space>
    </a-card>
  </view>
</template>

<script>
export default {
  setup() {
    const colors = [
      "red",
      "orangered",
      "orange",
      "gold",
      "lime",
      "green",
      "cyan",
      "blue",
      "arcoblue",
      "purple",
      "pinkpurple",
      "magenta",
      "gray",
    ];
    const custom = [
      "orangered",
      "orange",
      "gold",
      "lime",
      "green",
      "cyan",
      "blue",
      "arcoblue",
      "purple",
      "pinkpurple",
      "magenta",
      "gray",
    ];

    return {
      colors,
      custom,
    };
  },
};
</script>

<style lang="scss" scoped>
.tag-demo {
  padding: 200rpx 20rpx;
}

:deep(.arco-card) {
  margin-bottom: 30rpx;
}
</style>
